<template>
	<div class="check-org">
		<ul class="check-org-list">
			<li v-for="item in outsideOrgList" @click="changeOutsideOrg(item)">
				<div class="label">{{ item.dept_type_name }}</div>
				<span class="org-name">{{ item.dept_name }}</span>
				<p class="org-id">ID：{{ item.dept_id }}</p>
			</li>
		</ul>
	</div>
</template>

<script setup lang="ts">
import { apiInit } from '@/services'
const api = apiInit()
const emits = defineEmits(['enterHome'])
const props = defineProps(['outsideOrgList'])
const changeOutsideOrg = async (detail: any) => {
	let { code, msg } =
		await api.baseAuto.SwitchDeptExternalEmployeePrivateV1POST({
			query: { employeeId: detail.employee_id },
		})
	emits('enterHome', code, msg, detail, 'mobile')
}
</script>
<style scoped lang="less">
.check-org {
	&-list {
		width: 100%;
		height: 100%;
		padding: 12px;
		list-style: none;
		margin: 0;
		li {
			margin-bottom: 12px;
			width: 100%;
			background: #ffffff;
			border: 1px solid #e8eaed;
			border-radius: 4px;
			padding: 12px;
			.label {
				display: inline-block;
				background: #4c78fc;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 12px;
				line-height: 100%;
				padding: 2px 4px;
				color: #ffffff;
				border: 1px solid #4c78fc;
				border-radius: 2px;
				margin-right: 6px;
			}
			.org-name {
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 14px;
				line-height: 20px;
				color: #1f2329;
			}
			.org-id {
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 14px;
				line-height: 20px;
				color: #8f959e;
				margin-bottom: 0;
				margin-top: 3px;
			}
			&:active {
				background: #ebf1ff;
				border: 1px solid #4c78fc;
			}
		}
	}
}
</style>
